<template>
  <div>
    <el-row>
      <p class="pinformation">报告列表</p>
      <p class="totalStyle">共 {{ tableData.length }} 条数据</p>
    </el-row>
    <el-table border :data="tableData" ref="dataTableRef" v-loading="loading">
      <el-table-column align="center" show-overflow-tooltip label="报告编号" prop="params.reportCode" />
      <el-table-column align="center" show-overflow-tooltip label="编制人" prop="params.compiler" width="85" />
      <el-table-column align="center" show-overflow-tooltip label="编制时间" prop="params.createTime" width="140" />
        <el-table-column label="提交时间" align="center" prop="createTime" width="180" />
        <el-table-column label="耗时" align="center" prop="duration" width="180" />
        <el-table-column label="当前节点" align="center" prop="taskName" width="100" />
        <el-table-column label="办理人" align="center">
          <template #default="scope">
            <label v-if="scope.row.assigneeName">{{ scope.row.assigneeName }}
              <el-tag type="info">{{ scope.row.deptName }}</el-tag></label>
            <label v-if="scope.row.candidate">{{ scope.row.candidate }}</label>
          </template>
        </el-table-column>
        <el-table-column label="流程状态" align="center" width="90">
          <template #default="scope">
            <el-tag v-if="scope.row.finishTime == null">进行中</el-tag>
            <el-tag type="success" v-if="scope.row.finishTime != null">已完成</el-tag>
          </template>
        </el-table-column>
      <el-table-column show-overflow-tooltip label="操作" align="center" width="115" fixed="right">
        <template #default="scope">
          <el-button link type="success"  @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :class="'el-dialog-theme3'" v-model="show" fullscreen title="查看报告详情">
      <record :isHide="true" ref="recordRef"></record>
    </el-dialog>
  </div>
</template>

<script setup>
import { getBgpsForm, getBgpsList } from "@/api/taskProgressDetails/index";
import record from "../../../flowable/task/record/index.vue";

const { proxy } = getCurrentInstance();
const form = ref({});
const queryParams = ref({ pageNum: 1, pageSize: 10 });
const tableData = ref([]);
const projectId = ref("");
const loading = ref(false)
const heightParams = ref([{ tableName: "data", bottomHeight: 21 }]);
const recordRef = ref(null)
const show = ref(false);
function getForm(val) {
  projectId.value = val;
  queryParams.value.projectId = val;
  getBgpsForm(val).then((res) => {
    form.value = res.data;
  });
  getList()
}

function getList() {
  loading.value = true
  getBgpsList(queryParams.value).then((res) => {
    tableData.value = res.data;
    loading.value = false
  });
}
function handleView(row) {
  show.value = true
  nextTick(() => {
    recordRef.value.getInfo(row.procInsId)
  })
}
defineExpose({
  getForm,
});

function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});

onUpdated(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

</script>

<style></style>
